// 引入 Dart 内置的异步操作库，用于处理定时器相关功能
import 'dart:async';
// 引入 Flutter 的 Cupertino 风格组件库，提供 iOS 风格的 UI 组件
import 'package:flutter/cupertino.dart';
// 引入 Flutter 的核心 Material 组件库，提供丰富的 UI 组件和基础功能
import 'package:flutter/material.dart';
// 引入 GetX 状态管理库，用于实现响应式编程和状态管理
import 'package:get/get.dart';
// 引入自定义的颜色定义文件，包含应用中使用的颜色常量
import 'package:wit_shoes/define/define_colors.dart';
import 'package:wit_shoes/router/app_router.dart';
// 引入自定义的屏幕工具类，用于处理屏幕尺寸相关的操作
import 'package:wit_shoes/tools/screen_tool.dart';
// 引入自定义的样式工具类，包含应用中使用的文本样式等常量
import 'package:wit_shoes/tools/style_tools.dart';
// 引入自定义的组件工具类，包含一些常用的组件创建方法
import 'package:wit_shoes/tools/widget_tools.dart';

/// 登录视图类，包含登录界面的相关逻辑和组件构建方法
class LoginView {
  /// 定义一个可观察的变量，用于存储验证码倒计时的时间，初始值为 0
  var countdownTime = 0.obs;

  var issee = false.obs;

  /// 定义一个定时器变量，用于控制验证码倒计时的计时操作
  Timer? _timer;
  var switchingAttempt = false.obs;

  // 新增手机号码输入框的控制器
  final passwordController = TextEditingController();
  // 新增验证码输入框的控制器
  final codeController = TextEditingController();

  /// 启动验证码倒计时的方法
  /// 该方法会将倒计时时间初始化为 60 秒，并启动一个每秒执行一次的定时器
  /// 定时器会每秒将倒计时时间减 1，直到倒计时时间为 0 时取消定时器
  void startCountdown() {
    // 将倒计时时间设置为 60 秒
    countdownTime.value = 60;
    // 创建一个每秒执行一次的定时器
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      // 检查倒计时时间是否大于 0
      if (countdownTime.value > 0) {
        // 若大于 0，则将倒计时时间减 1
        countdownTime.value--;
      } else {
        // 若等于 0，则取消定时器
        _timer?.cancel();
      }
    });
  }

  /// 验证码倒计时的逻辑处理方法
  /// 该方法会调用 startCountdown 方法启动倒计时，同时可以添加额外的逻辑，如验证手机号码格式
  void countdownLogic() {
    // 调用 startCountdown 方法启动倒计时
    startCountdown();
    // 可添加额外逻辑，如验证手机号码格式
  }

  LoginViewProtocol? delegate;

  /// 获取验证码按钮文本
  String handleCodeText() =>
      countdownTime.value > 0 ? "${countdownTime.value}s" : "发送验证码";

  /// 构建输入框边框样式，设置为无边框
  InputBorder buildInputBorder() {
    return InputBorder.none;
  }

  /// 构建通用输入框容器
  Widget buildInputContainer({required Widget child}) {
    return SizedBox(
      height: 44,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 27),
        padding: const EdgeInsets.symmetric(horizontal: 24),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(22)),
        ),
        child: child,
      ),
    );
  }

  /// 对外内容视图接口
  Widget contentView() {
    //添加底纹Stack
    return Stack(children: [
      Positioned(
        top: 0,
        left: 0,
        child: Container(
          width: 107,
          height: 167,
          child: Image.asset(
            "assets/images/indexW@3x.png",
            width: 15,
            height: 15,
          ),
        ),
      ),
      Positioned(
        left: ScreenTool.screenWidth - 107,
        bottom: ScreenTool.bottomSafeHeight,
        child: Container(
          width: 107,
          height: 167,
          child: Image.asset(
            "assets/images/indexS@3x.png",
            width: 15,
            height: 15,
          ),
        ),
      ),
      _mainView(),
    ]);
  }

  /// 主内容视图
  Widget _mainView() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(top: 83),
      child: Column(
        children: [
          const Text('logo', style: textStyleTools.logoTextStyle),
          const Text('智慧鞋', style: textStyleTools.titleTextStyle),
          const SizedBox(height: 45.5),
          _inputView(),
          const SizedBox(height: 20),
          Obx(
            () {
              if (switchingAttempt.value) {
                return _inputCodeView();
              } else {
                return _inputPasswordView();
              }
            },
          ),

          const SizedBox(height: 20),
          // 使用 Align 组件让按钮右对齐
          Align(
            alignment: Alignment.centerRight,
            child: Container(
              margin: const EdgeInsets.only(right: 27),
              child: WidgetTools().createCustomInkWellButton(
                '密码登录',
                () {
                  print('密码登录');
                  switchingAttempt.value = !switchingAttempt.value;
                  codeController.clear();
                  passwordController.clear();
                },
                bgColor: CustomColors.backgroundColor,
                textColor: CustomColors.textColor,
                buttonWidth: 80,
                height: 17,
                shadow: const BoxShadow(),
              ),
            ),
          ),
          const SizedBox(height: 69),
          WidgetTools().createMaterialButton(
              radius: 22,
              ScreenTool.screenWidth - 27 - 27,
              "登录",
              CustomColors.buttonColor,
              CustomColors.backgroundColor,
              0,
              () => _login()),

          const SizedBox(height: 16),

          //协议
          _agreement(),
          const SizedBox(height: 94.5),
          //第三方登录
          _thirdPartyLogin(),
        ],
      ),
    );
  }

  _login() {
    Get.toNamed(AppRoutes.home);
    countdownTime.value = 0;
    _timer?.cancel();
  }

  ///第三方登录
  Widget _thirdPartyLogin() {
    return Container(
      child: Column(
        children: [
          const Text(
            "其他登录方式",
            style: TextStyle(color: CustomColors.textColor, fontSize: 12),
          ),
          const SizedBox(
            height: 12,
          ),
          SizedBox(
            height: 40,
            width: 40,
            child: Image.asset(
              "assets/images/wachat.png",
              width: 15,
              height: 15,
            ),
          ),
        ],
      ),
    );
  }

  ///协议
  Widget _agreement() {
    // AssetImage(
    // "assets/images/wachatE.png")
    return Container(
      padding: const EdgeInsets.only(left: 27, right: 27),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ///选择框
          GestureDetector(
            onTap: () {
              issee.value = !issee.value;
            },
            child: Obx(
              () {
                if (issee.value) {
                  return Image.asset(
                    "assets/images/wachatE.png",
                    width: 15,
                    height: 15,
                  );
                } else {
                  return Image.asset(
                    "assets/images/wachatS.png",
                    width: 15,
                    height: 15,
                  );
                }
              },
            ),
          ),
          const SizedBox(
            width: 10,
          ),
          //协议文字
          Expanded(
            child: RichText(
              //您已阅读并同意《智慧鞋用户服务协议》《隐私权政策》《软件许可使用协议》
              text: const TextSpan(
                  children: [
                    TextSpan(
                      text: "《智慧鞋用户服务协议》",
                      style: TextStyle(
                          color: CustomColors.buttonColor, fontSize: 12.0),
                    ),
                    TextSpan(
                      text: "《隐私权政策》",
                      style: TextStyle(
                          color: CustomColors.buttonColor, fontSize: 12.0),
                    ),
                    TextSpan(
                      text: "《软件许可使用协议》",
                      style: TextStyle(
                          color: CustomColors.buttonColor, fontSize: 12.0),
                    ),
                  ],
                  text: "您已阅读并同意",
                  style:
                      TextStyle(color: CustomColors.textColor, fontSize: 12.0)),
            ),
          ),
        ],
      ),
    );
  }

  /// 手机号码输入框
  Widget _inputView() {
    return buildInputContainer(
      child: Row(
        children: [
          const Text("+86", style: TextStyle(color: CustomColors.textColor)),
          const SizedBox(width: 12),
          Container(width: 0.5, height: 14, color: CustomColors.greyColor),
          const SizedBox(width: 12),
          Expanded(
            child: TextField(
              controller: passwordController, // 使用控制器
              decoration: InputDecoration(
                border: InputBorder.none,
                focusedBorder: buildInputBorder(),
                enabledBorder: buildInputBorder(),
                disabledBorder: buildInputBorder(),
                errorBorder: buildInputBorder(),
                hintText: "请输入手机号",
                contentPadding: EdgeInsets.zero,
              ),
            ),
          ),
        ],
      ),
    );
  }

  ///密码输入框
  Widget _inputPasswordView() {
    return buildInputContainer(
      child: Row(
        children: [
          const Text("密码",
              style: TextStyle(color: CustomColors.textColor, fontSize: 14)),
          const SizedBox(width: 12),
          Container(width: 0.5, height: 14, color: CustomColors.greyColor),
          const SizedBox(width: 12),
          Expanded(
            child: TextField(
              obscureText: true,
              onChanged: (text) {
                text = "";
              },
              decoration: InputDecoration(
                // 所有状态下都设置为无边框
                border: buildInputBorder(),
                focusedBorder: buildInputBorder(),
                enabledBorder: buildInputBorder(),
                disabledBorder: buildInputBorder(),
                errorBorder: buildInputBorder(),
                hintText: "请输入密码",
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 验证码输入框
  Widget _inputCodeView() {
    return buildInputContainer(
      child: Row(
        children: [
          const Text("验证码",
              style: TextStyle(color: CustomColors.textColor, fontSize: 14)),
          const SizedBox(width: 12),
          Container(width: 0.5, height: 14, color: CustomColors.greyColor),
          const SizedBox(width: 12),
          Expanded(
            child: TextField(
              controller: codeController, // 使用控制器
              onChanged: (text) {},
              decoration: InputDecoration(
                // 明确设置所有状态下的边框为无
                border: InputBorder.none,
                focusedBorder: buildInputBorder(),
                enabledBorder: buildInputBorder(),
                disabledBorder: buildInputBorder(),
                errorBorder: buildInputBorder(),
                hintText: "请输入验证码",
                suffixIcon: SizedBox(
                  height: 56,
                  child: GestureDetector(
                    // 根据倒计时状态决定是否可点击
                    onTap: () {
                      if (countdownTime.value == 0) {
                        countdownLogic();
                        delegate?.sendCode();
                        print('Countdown started'); // 用于调试，确认点击事件是否触发
                      }
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Obx(() => Text(
                              handleCodeText(),
                              style: TextStyle(
                                fontSize: 13,
                                color: countdownTime.value > 0
                                    ? CustomColors.greyColor.withOpacity(0.5)
                                    : CustomColors.greyColor,
                                // 倒计时期间文字颜色变浅
                              ),
                            )),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

abstract class LoginViewProtocol {
  void sendCode();
}
